<template>
  <div class="carinfo-page">
    <common-header :headTitle='headTitle'>
    </common-header>
    <div class="content" v-show="!buttonShow">
      <!-- 画板 -->
      <board :socket="socket" :formItem="formItem" :fileList="fileList" :drawData="drawData"></board>
      <!-- 聊天室 -->
      <chatRoom :socket="socket" :formItem="formItem" :message="message" :userList="userList" :chatImgUrl="chatImgUrl"></chatRoom>
      <div class="slide-container">
        <imgSlide :fileList="fileList"></imgSlide>
      </div>
    </div>
    <div v-show="buttonShow" class="login-box">
      <Form :model="formItem" :label-width="60">
        <FormItem label="房间号">
          <Input v-model="formItem.roomId" placeholder="请输入房间号">
          </Input>
        </FormItem>
        <FormItem label="用户名">
          <Input v-model="formItem.name" placeholder="请输入用户名">
          </Input>
        </FormItem>
        <Button type="success" long @click="loginRoom">登录</Button>
      </Form>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import io from 'socket.io-client';
import CommonHeader from '@/components/header/CommonHeader'
import board from '@/components/board'
import chatRoom from '@/components/chatRoom'
import imgSlide from '@/components/imgSlide'

export default {
  data() {
    return {
      headTitle:'',
      chooseModal: false,
      buttonShow:true,
      formItem:{
          roomId:'22',
          name:'李苗苗'
      },
      message:'',//消息内容数据
      userList:[],//当前登录的用户
      socket_url:'https://192.168.1.232:8888',
      socket:'',
      fileList:[],
      drawData:null,
      chatImgUrl:''
    }
  },
  components: {
    CommonHeader,
    board,
    chatRoom,
    imgSlide,
  },
  created () {
    this.getRouteData()
  },
  mounted(){
  },
  methods: {
    getRouteData(){
      this.headTitle=localStorage.getItem('projectName');
    },
    // 进入房间
    loginRoom(){
      // 建立socket连接
      this.socket = io.connect(this.socket_url);
      this.socket.on('connect', ()=> {
          console.log("server已连接");
          // 发送登录请求
          let logindata = {roomid:this.formItem.roomId,account:this.formItem.name};
          this.socket.emit("LOGIN_",logindata);
          // 监听有人登录的消息
          this.socket.on("LOGIN_",(data)=>{
            this.userList=data.info.list;
          })
          // 接收登录消息
          this.socket.on("LOGIN_OK_",(data)=>{
            this.userList=data.info.list;
            this.buttonShow=false;
          })
          // 监听发送的消息
          this.socket.on("message",(res)=>{
            this.message=res;
            console.log(res)
          })
          this.getFileList();
          //监听获取文件列表请求
          this.socket.on("no_page",(res)=>{
            this.fileList=res.info
          })
          // 监听获取绘图的数据
          this.socket.on('draw_info_draw',(res)=>{
            this.chatImgUrl=res.info.nerurl
          });
          // 监听获取绘图的数据
          this.socket.on('draw-info',(res)=>{
            this.drawData=res.info
          });
      });
    },
    //发送获取文件列表请求
    getFileList(){
      let filedata = {
        tablename:'file_room', //查询哪个表的数据(可变)
        query: { //查询条件
          roomid:'='+this.formItem.roomId,//房间号前拼接'='
        }
      };
      this.socket.emit("no_page",filedata);
    },
  }
}
</script>

<style scoped lang='scss'>
.content{
    position:fixed;
    top:60px;
    left:0;
    bottom:0;
    right:0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height:100%;
}
.login-box{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border:1px solid #333;
  width:300px;
  height:300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  background-color:#fff;
}
.slide-container{
  position:fixed;
  bottom:0px;
  z-index:10;
  width:100%;
}
</style>